
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/static/layui/dist/css/layui.css" media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<div class="layui-col-md12">
{#     layui-col-md-offset1#}

<table class="layui-hide" id="test" lay-filter="test3"></table>

</div>
<script type="text/html" id="switchTpl">
  <!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="ON|OFF" lay-filter="sexDemo" {% verbatim %}{{ d.id == 10003 ? 'checked' : '' }}{% endverbatim %}>
</script>

<script type="text/html" id="checkboxTpl">
  <!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="lock" value="{{d.id}}" title="禁止" lay-filter="lockDemo" {% verbatim %}{{ d.id == 10006 ? 'checked' : '' }}{% endverbatim %}>
</script>



<script src="/static/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('table', function(){
  var table = layui.table
  ,form = layui.form;

  table.render({
    elem: '#test'
    ,url:'/zfq/admin/UserManage/usrInforInto'
    ,cellMinWidth: 80
    ,cols: [[
      {type:'numbers'}
      ,{type: 'checkbox'}
      ,{field:'loginid', title:'ID', width:80, unresize: true, sort: true}
      ,{field:'loginname', title:'用户名',  width:120,templet: '#usernameTpl', sort: true,edit:true}
      ,{field:'password', title:'密码', templet: '#usernameTpl',edit:true}
      ,{field:'email', title:'邮箱',  width:182,edit:true}
      ,{field:'logintime', title:'登录次数',  width:92,sort: true,edit:true}
      ,{field:'registerdatetime', title:'注册时间', width:160, sort: true}
      ,{field:'registerip', title:'注册IP',width:130}
      ,{field:'lastlogindatetime', title:'上次登录时间',  width:160,sort: true}
      ,{field:'lastloginip', title:'上次登录IP',width:130}
      ,{field:'remark', title:'备注', minWidth:100,edit:true}
      ,{field:'sex', title:'登陆状态', width:120, templet: '#switchTpl', unresize: true}
      ,{field:'lock', title:'登录类型', width:110, templet: '#checkboxTpl', unresize: true}
    ]]
    ,page: true
      ,limit:20
      ,limits:[10,20,30,50]

  });

  //监听性别操作
  form.on('switch(sexDemo)', function(obj){
    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
  });

  //监听锁定操作
  form.on('checkbox(lockDemo)', function(obj){
    layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
  });
  //监听单元格编辑
  table.on('edit(test3)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data //得到所在行所有键值
    ,field = obj.field; //得到字段
    layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
  });
});


</script>
